
var htmlWP = require('html-webpack-plugin');

module.exports = {
	entry: './src/main.js', // 指定打包的入口文件
	output: {
		path: __dirname + '/dist',  // 注意webpack1.14.0要求这个路径是一个绝对路径
		filename: 'build.js'
	},
	module: {
		loaders: [
			{
				test: /\.css$/,
				loader: 'style-loader!css-loader', // 从右向左调用
			},
			{
				test: /\.scss$/, // 打包 .scss 文件
				loader: 'style-loader!css-loader!sass-loader'
			},
			{
				test: /\.less$/,
				loader: 'style-loader!css-loader!less-loader'
			},
			{
				test: /\.(png|gif|jpg|ttf|woff|woff2)$/, // 打包 URL 请求的资源文件
				loader: 'url-loader?limit=20000' 
				// limit表示图片大小约20k是临界值，
				// 小于这个临界值的图片使用base64编码字符串打包进build.js中
				// 大于这个临界值的图片作为图片加载
			},
			// 由于webpack2.0和3.0本身已经支持es6转es5语法了，所以这个地方的配置是可以删除了
			// {
			// 	test: /\.js$/,
			// 	loader: 'babel-loader',
			// 	exclude: /node_modules/  // 排除node_modules里面的js文件的匹配
			// },
			{
				test: /\.vue$/, // 解析 .vue 组件页面
				loader: 'vue-loader'
			}
		]
	},
	// 由于webpack2.0和3.0本身已经支持es6转es5语法了，所以这个地方的配置是可以删除了
	// babel: {
	// 	presets: ['es2015'], // 配置es6语法转换es5语法
	// 	plugins: ['transform-runtime'] // 解决打包 .vue 文件不报错
	// },
	plugins: [
		new htmlWP({
			title: '首页', // 生成的页面标题
			filename: 'index.html', // webpack-dev-server在内存中生成的文件名称，自动将build.js注入
			template: 'index1.html' // 根据index1.html这个模版来生成
		})
	]
}